<template>
	<view class="">
		<view class="u-flex-xy-center sort">
			<view class="sort-item u-flex-xy-center" @click="showlevelTypePopup">
				<view class="text">{{ levelTypefullName }}</view>
				<u-icon name="arrow-down" size="12"></u-icon>
			</view>
			<view class="sort-item u-flex-xy-center" @click="unitPriceSorttap()">
				<view class="text">价格</view>
				<u-image v-if="searchdata.unitPriceSort == ''" :src="pricesort" width="24rpx" height="24rpx"></u-image>
				<u-icon v-if="searchdata.unitPriceSort == '0'" color="#39C03E" name="arrow-up" size="12"></u-icon>
				<u-icon v-if="searchdata.unitPriceSort == '1'" color="#39C03E" name="arrow-down" size="12"></u-icon>
			</view>
			<view class="sort-item u-flex-xy-center" @click="filterPop = true">
				<view class="text">筛选</view>
				<view class="iconfont icon-shaixuan"></view>
			</view>
			<view class="view" @click="editview">
				<view class="iconfont " :class="rowtype=='biserial'?'icon-wanggeshitu':'icon-liebiaoshitu'"></view>
			</view>
			<!-- icon-wanggeshitu -->
			<!-- view: "biserial", -->
		</view>

		<u-popup :show="levelTypeShow" @close="levelTypeShow = false" :round="10">
			<view>
				<!-- `分类选择` -->
				<u-navbar title=" " :safeAreaInsetTop="false" :leftIcon="false" :placeholder="false" :autoBack="false"
					:fixed="false" rightText="重置" @rightClick="resetlevelType()">
				</u-navbar>
				<view style="height: 70vh">
					<levelType @click="levelTypeTap"></levelType>
				</view>
			</view>
		</u-popup>
		<u-popup :show="filterPop" @close="filterclose" :round="10">
			<view>
				<!-- `分类选择` -->
				<u-navbar title="全部筛选" :safeAreaInsetTop="false" :leftIcon="false" :placeholder="false"
					:autoBack="false" :fixed="false" rightIcon="close" @rightClick="filterclose">
				</u-navbar>
				<view style="height: 50vh" class="filter-container">
					<scroll-view style="height: 50vh;" scroll-y="true">
						<view class="filter-title" style="padding: 0 20rpx;font-size: 28rpx;font-weight: bold;">
							供货地区
						</view>
						<view class="filter-content u-flex-y-center" style="padding: 20rpx ;">
							<u-button size="mini" :type="searchdata.province ? 'success' : 'info'" :text="areastr"
								shape="circle" :customStyle="areaIdstyle" @click="showAreaTree"></u-button>
							<u-button size="mini" :type="searchdata.province ? 'info' : 'success'" text="全国"
								shape="circle" :customStyle="areaIdstyle" @click="clearArea"></u-button>
						</view>
						<view class="filter-title" style="padding: 0 20rpx;font-size: 28rpx;font-weight: bold;">
							交易模式
						</view>
						<view class="filter-content u-flex-y-center" style="padding: 20rpx ;">
							<u-button v-for="(item, key) in dicts.transactional_mode" :key="key" size="mini"
								:type="searchdata.transactionalMode == item.value ? 'success' : 'info'"
								:text="item.label" shape="circle" :customStyle="areaIdstyle"
								@click="setSearchdata('transactionalMode', item.value)"></u-button>
						</view>
						<view class="filter-title" style="padding: 0 20rpx;font-size: 28rpx;font-weight: bold;">
							经营模式
						</view>
						<view class="filter-content u-flex-y-center" style="padding: 20rpx ;">
							<u-button v-for="(item, key) in dicts.manage_model" :key="key" size="mini"
								:type="searchdata.manageModel == item.value ? 'success' : 'info'" :text="item.label"
								shape="circle" :customStyle="areaIdstyle"
								@click="setSearchdata('manageModel', item.value)"></u-button>
						</view>
						<view class="filter-title" style="padding: 0 20rpx;font-size: 28rpx;font-weight: bold;">
							平台交易
						</view>
						<view class="filter-content u-flex-y-center" style="padding: 20rpx ;">
							<u-button v-for="(item, key) in dicts.platform_trading" :key="key" size="mini"
								:type="searchdata.platformTrading == item.value ? 'success' : 'info'" :text="item.label"
								shape="circle" :customStyle="areaIdstyle"
								@click="setSearchdata('platformTrading', item.value)"></u-button>
						</view>
						<view class="filter-title" style="padding: 0 20rpx;font-size: 28rpx;font-weight: bold;">
							是否特惠
						</view>
						<view class="filter-content u-flex-y-center" style="padding: 20rpx ;">
							<u-button v-for="(item, key) in dicts.is_check_type" :key="key" size="mini"
								:type="searchdata.discount == item.value ? 'success' : 'info'" :text="item.label"
								shape="circle" :customStyle="areaIdstyle"
								@click="setSearchdata('discount', item.value)"></u-button>
						</view>
						<view class="" style="height: 100rpx;">

						</view>
					</scroll-view>
				</view>
				<bottombox>
					<u-button type="error" text="重置" shape="circle" @click="onFilterClear"></u-button>
					<view style="width: 40rpx"></view>
					<u-button type="success" text="搜索" shape="circle" @click="onfilterSearch"></u-button>
				</bottombox>
			</view>
		</u-popup>
		<area-tree ref="areaTree" :areaTree="areaTree" @change="areachange"></area-tree>
	</view>
</template>

<script>
	// @Schema(description = "特惠 0否 1是")
	// private Integer discount;
	// pricesort.png
	import pricesort from "@/static/pricesort.png"
	import areaTree from "@/pages/my/components/areaTree.vue"
	export default {
		components: {
			areaTree,
		},
		props: {
			areaTree: {
				type: Array,
				default () {
					return []
				}
			},
			dicts: {
				type: Object,
				default () {
					return {}
				}
			},
			rowtype: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				pricesort,
				levelTypeShow: false,
				filterPop: false,
				levelTypefullName: "分类",
				// rowtype: "biserial",
				// 双列biserial 单列singleRow
				searchdata: {
					level1Type: "",
					level2Type: "",
					level3Type: "",
					unitPriceSort: "",

					province: "",
					city: "",
					county: "",
					transactionalMode: "",
					manageModel: "",
					platformTrading: "",
					discount: "",

				},
				areaIdstyle: {
					width: "auto",
					margin: "0 10rpx 0 0",
					height: "60rpx",
					fontSize: "28rpx",
					background: "f5f5f5",
					minWidth: "220rpx",
					width: 'auto'
				}
			}
		},
		computed: {
			areastr() {
				if (this.searchdata.province == '' || !this.searchdata.province) {
					return '请选择'
				}
				return `${this.searchdata.province} ${this.searchdata.city} ${this.searchdata.county}`

			}
		},
		methods: {
			editview() {
				let rowtype = this.rowtype == "biserial" ? "singleRow" : "biserial"
				// 双列biserial 单列singleRow
				this.$emit('editrowtype', rowtype)
				console.log(111);
			},
			init(query) {
				if (query.level1Type) {
					let goodsListKey = uni.getStorageSync("goodsListKey");
					if (goodsListKey) {
						this.levelTypefullName = goodsListKey.fullName;
						uni.removeStorageSync("goodsListKey");
					}
					this.searchdata.level1Type = query.level1Type || "";
					this.searchdata.level2Type = query.level2Type || "";
					this.searchdata.level3Type = query.level3Type || "";
					this.searchdata.transactionalMode = query.transactionalMode || "";
					this.$emit("change", this.searchdata)
				} else {
					this.$emit("change", this.searchdata)
				}
			},
			showlevelTypePopup() {
				this.levelTypeShow = true;
			},
			levelTypeTap({
				item1,
				item2,
				item3
			}) {
				this.searchdata.level1Type = item1.id;
				this.searchdata.level2Type = item2.id;
				this.searchdata.level3Type = item3.id;
				this.levelTypefullName = item3.fullName;
				this.levelTypeShow = false;
				this.$emit("change", this.searchdata)
			},
			resetlevelType() {
				this.searchdata.level1Type = '';
				this.searchdata.level2Type = '';
				this.searchdata.level3Type = '';
				this.levelTypefullName = '分类';
				this.levelTypeShow = false;
				this.$emit("change", this.searchdata)
			},
			unitPriceSorttap() {
				if (this.searchdata.unitPriceSort == '') {
					this.searchdata.unitPriceSort = '0';
				} else if (this.searchdata.unitPriceSort == '0') {
					this.searchdata.unitPriceSort = '1';
				} else if (this.searchdata.unitPriceSort == '1') {
					this.searchdata.unitPriceSort = '';
				}
				this.$emit("change", this.searchdata)
			},
			showAreaTree() {
				this.$refs.areaTree.showPickerFn();
			},
			areachange(e) {
				this.searchdata.province = e.province;
				this.searchdata.city = e.city;
				this.searchdata.county = e.district;

			},
			clearArea() {
				this.searchdata.province = '';
				this.searchdata.city = '';
				this.searchdata.county = '';
			},
			setSearchdata(key, value) {
				this.searchdata[key] = value;
			},
			onFilterClear() {
				this.filterPop = false
				this.clearArea();
				this.searchdata.transactionalMode = '';
				this.searchdata.manageModel = '';
				this.searchdata.platformTrading = '';
				this.$emit("change", this.searchdata)
			},
			onfilterSearch() {
				this.filterPop = false
				this.$emit("change", this.searchdata)
			},
			filterclose() {
				this.filterPop = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sort {
		padding: 0 20rpx;
		padding-bottom: 20rpx;

		.sort-item {
			width: 0;
			flex: 1;
			font-size: 28rpx;
			color: #666;

			.text {
				margin-right: 10rpx;
			}
		}
	}
</style>